<template>
  <div style="height: 100%">
    <!--引用表格-->
    <BasicTable
      :dataSource="normList"
      style="height: 100%; width: 100%"
      bordered
      size="middle"
      rowKey="id"
      :canResize="false"
      :columns="columnsthree"
      :pagination="false"
    >
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.key === 'itemsName'">
          {{ record.itemsName }}
        </template>
        <template v-if="column.key === 'basisName'">
          {{ record.basisName }}
        </template>
        <template v-if="column.key === 'basisNum'">
          {{ record.basisNum }}
        </template>
        <template v-if="column.key === 'itemsBasisName'">
          <a-input v-model:value="record.itemsBasisName"></a-input>
        </template>
        <template v-if="column.key === 'actions'">
          <a href="javascript:void(0)" style="margin-right: 8px" @click="handleTarget(record)">指标</a>
          <a-popconfirm title="确认删除？" @confirm="handleDelete(record, index)">
            <a href="#" style="color: #f03232">删除</a>
          </a-popconfirm>
        </template>
      </template>
      <!--插槽:table标题-->
      <template #tableTitle>
        <a-button type="primary" @click="handleChoose" preIcon="ant-design:plus-circle-outlined">选择实验项目</a-button>
      </template>
    </BasicTable>
    <!--选择实验标准-->
    <LabItemsBasisItemsTable
      ref="itemsNormalTable"
      @register="registerBasictModal"
      :mainBasisId="props.mainBasisId"
      @success="handleSuccess"
      @changeSelect="changeSelect"
    />
    <!-- 指标 -->
    <LabItemBasisItemTarget @register="registerBasictModalTarget" @saveTarget="saveTarget" />
  </div>
</template>

<script lang="ts" name="items-labItems" setup>
  import { ref, watch, defineExpose,nextTick } from 'vue';
  import { useModal } from '/@/components/Modal';
  import { BasicTable } from '/@/components/Table';
  // import { useListPage } from '/@/hooks/system/useListPage';
  import LabItemsBasisItemsTable from './LabItemBasisItemsTable.vue';
  import LabItemBasisItemTarget from './LabItemBasisItemTarget.vue';
  import { columnsthree } from '../LabItemsBasis.data';
  import { getTargetList } from '../LabItemsBasis.api';

  const props = defineProps({
    mainBasisId: { type: String },
  });
  const normList = ref([]);
  // const queryParam = reactive<any>({
  //   itemsId: props.itemsId,
  //   order: 'asc',
  // });
  const itemsNormalTable = ref();
  const [registerBasictModal, { openModal: openBModal }] = useModal();
  const [registerBasictModalTarget, { openModal: openBModalTarget }] = useModal();
  /**
   * 点击引入标准事件回调
   */
  function handleChoose() {
    openBModal(true, { itemsId: props.itemsId });
    nextTick(()=>{
      itemsNormalTable.value.itemValue = null;
      itemsNormalTable.value.clearSelectedRowKeys();
      itemsNormalTable.value.queryParam.sortId = ''
      itemsNormalTable.value.reload();
      
    })
  }

  function changeSelect(item) {
    if (item.length > 0) {
      if (normList.value.length > 0) {
        let filteredArray=[];
        if(item.length>0){
          filteredArray = item.filter((item2) => {
            return !normList.value.some((item1) => item1.itemsBasisId === item2.id);
          });
          if(filteredArray.length>0){
            for(let i=0;i<filteredArray.length;i++){
              filteredArray[i].itemsBasisId=filteredArray[i].id;
              filteredArray[i].id = '';
              filteredArray[i].mainBasisId = props.mainBasisId;
              filteredArray[i].labItemsBasisIndexList = [];
            }
          }
        }
        
        const concatArr = [...normList.value, ...filteredArray]
        normList.value = concatArr;
      } else {
        normList.value = item.map((item) => {
          item.itemsBasisId = item.id;
          item.id = '';
          item.mainBasisId = props.mainBasisId;
          item.labItemsBasisIndexList = [];
          return item;
        });
      }
    }
  }
  async function handleDelete(record, index) {
    normList.value.splice(index, 1);
  }
  function handleTarget(record) {
    record.mainBasisId = props.mainBasisId;
    openBModalTarget(true, { record });
  }
  function saveTarget(record) {
    for (let i = 0; i < normList.value.length; i++) {
      if (normList.value[i].itemsId === record.itemsId) {
        Object.assign(normList.value[i], record);
      }
    }
  }
  async function getTargetListData() {
    let params = { mainBasisId: props.mainBasisId };
    let result = await getTargetList(params);
    normList.value = [];
    if (result.code === 200) {
      normList.value = result.result.labItemsBasisItemsVoList;
    }
  }

  /**
   * 成功回调
   */
  function handleSuccess() {
    // (selectedRowKeys.value = []) && reload();
  }

  /**
   * 操作栏
   */
  // function getTableAction(record) {
  //   return [
  //     {
  //       label: '指标',
  //       // onClick: handleEdit.bind(null, record),
  //     },
  //     {
  //       label: '删除',
  //       color: 'error',
  //       popConfirm: {
  //         title: '是否确认删除',
  //         confirm: handleDelete.bind(null, record),
  //       },
  //     },
  //   ];
  // }
  // onBeforeUpdate(() => {
  //   reload();
  // });
  watch(props.mainBasisId,(newValue, oldValue) => {
      normList.value = [];
      itemsNormalTable.value.reload();
      itemsNormalTable.value.clearSelectedRowKeys();
    }
  );
  defineExpose({
    normList,
    getTargetListData,
  });
</script>

<style lang="less" scoped>
  .jeecg-basic-table-form-container {
    .table-page-search-submitButtons {
      display: block;
      margin-bottom: 24px;
      white-space: nowrap;
    }
    .query-group-cust {
      width: calc(50% - 15px);
      min-width: 100px !important;
    }
    .query-group-split-cust {
      width: 30px;
      display: inline-block;
      text-align: center;
    }
  }
  .font-css {
    position: relative;
    display: flex;
    padding-left: 7px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.85);
    cursor: move;
    user-select: none;
    top: 5px;
  }

  :deep(.ant-tabs-card) {
    height: 100% !important;
  }
  :deep(.ant-tabs-content-holder) {
    height: 100% !important;
  }
  :deep(.ant-tabs-content-top) {
    height: 100% !important;
  }
  :deep(.ant-spin-nested-loading) {
    height: 100% !important;
  }
  :deep(.ant-tabs-card) {
    height: 100% !important;
  }
  :deep(.ant-tabs-tabpane-active) {
    height: 100% !important;
  }
</style>
